<template>
	<view >
		<!-- 搜索组件 -->
		<view class="width-80vw f-center" >
			<u-search  placeholder="搜索" @focus='show=true' :show-action='false' v-model="keyword"></u-search>
		</view>
		<view class="u-flex u-row-around f-center width-80vw">
			<view class="" >
				搜索分类：
			</view>
			<u-button :type="select=='title'?'warning':''" size="mini" @click="select='title'">文章标题</u-button>
		    <u-button :type="select=='body'?'warning':''" size="mini" @click="select='body'">文章内容</u-button>
		    <u-button :type="select=='time'?'warning':''" size="mini" @click="select='time'">日期</u-button>
		</view>
		<!-- 内容渲染 -->
		<u-card class="TopicCenter" v-for="item in usertitles" :key="item.aid">
			<view class="" slot="body">
				<view class="u-body-item u-flex  u-p-b-0 ">
					<u-avatar :src="item.avatar" :size="80" :show-sex='true' mode="circle" :sex-icon="item.gender==1?'man': item.gender==0? 'woman':''"
						:show-level='true'></u-avatar>
					<view class="u-line-1 u-m-l-15">
						<view class="u-body-item-title u-line-1">{{item.username}}</view>
						<view class="u-body-item-title u-line-1">{{item.createTime}}</view>
					</view>

				</view>
				<view class="u-body-item">
					{{item.title}}
				</view>
				<view class="u-body-item">
					<image :src="item.imgUrl" mode="aspectFit" style="width:500rpx;height: 400rpx;"></image>
				</view>
				<u-read-more  :show-height="200" ref="uReadMore" :toggle="true">
					<!-- u-parse组件在微信小程序渲染慢，支付宝小程序rich-text不支持nodes属性 -->
					<!-- #ifdef MP-ALIPAY -->
					<u-parse :html="item.body"></u-parse>
					<!-- #endif -->
					<!-- #ifndef MP-ALIPAY -->
					<rich-text :nodes="item.body"></rich-text>
					<!-- #endif -->
				</u-read-more>

			</view>
			<view class="u-flex u-row-between" slot="foot">
				<u-icon name="chat-fill" size="34" color="" label="30评论"></u-icon>
				<u-icon name="chat-fill" size="34" color="" :label='item.eye+"阅读"'></u-icon>
			</view>
		</u-card>
		
	</view>


</template>

<script>
	import {mixins,mix_com} from '@/public.js'
	export default {
		name: 'TopicCenter',
		props:['pageSize2'],
		mixins: [mixins,mix_com],
		data() {
			return {
				usertitle: [],
				keyword:'',
				show:false,
				select:'title',
				
			};
		},
		watch:{
			//监听下拉加载更多文章
			pageSize(){
				this.gettitleMsg(this.pageSize)
			}
		},
		created() {
			//this._m_getUserMsg()
			//setTimeout(()=>{this.gettitleMsg()},1000)
			this.gettitleMsg()
			
		},
		computed:{
			userMsg(){
				return JSON.parse(uni.getStorageSync('myMsg'))
			},
			
		},
		methods: {
			//获得指定用户文章
			gettitleMsg(pageSize) {
				this.$api.gettitleMsg({uid:this.userMsg.uid,
				pageSize:pageSize}).then(
					(res) => {
						this.usertitle = res;	
					},
					(err) => {
						console.log(err);
					}
				)
			},
			
			
		}
	};
</script>

<style scoped lang="scss">
	.TopicCenter {}
	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}
</style>
